<template>
  <div>
    <van-nav-bar
        title="留言与回复"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <div>
      <h3 style="margin-left: 18px">我收到的留言:</h3>
    </div>
    <div style="width: 90%;margin-left: 18px">
      <div style="margin-top: 20px"  v-for="(message,key) in messageList" :key="key">
        <van-swipe-cell>
        <van-card
            :tag="message.state===1?'已回复':'未回复'"
            :price=message.title
            :desc=message.date
            :title=message.namefrom
            thumb='http://47.109.38.52:80/group1/M00/00/00/rBIu8WL2NLmAZeRIAAAP1gIBsl4390.jpg'
            currency="title:"
            @click="$router.push('/message-watch?id='+message.id+'&title='+message.title+'&detail='+message.detail+'&namefrom='+message.namefrom+'&nameto='+message.nameto+'&date='+message.date)"
        />
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="deleteLetter(message.id)"/>
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <div>
      <h3 style="margin-left: 18px;margin-top: 40px">我收到的回复:</h3>
    </div>
    <div style="width: 90%;background-color: #F5F5F6;margin-left: 18px;border-radius: 4%">
      <div style="margin-top: 20px;margin-left: 20px"  v-for="(reply,key) in replyList" :key="key">
        <van-swipe-cell>
          <van-card
              :price=reply.title
              :desc=reply.date
              :title=reply.namefrom
              thumb='http://47.109.38.52:80/group1/M00/00/00/rBIu8WL2NLmAZeRIAAAP1gIBsl4390.jpg'
              currency="title:"
              @click="getReflex(reply.mid,reply)"
          />
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="deleteReflex(reply.id)"/>
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <buttom/>
  </div>
</template>

<script>
import buttom from "@/components/book/buttom";
export default {
  name: "Message",
  components:{
    buttom,
  },
  data(){
    return{
      tag:'',
      username:'lichishui',
      reflex:'',
      user:this.$store.state.userinfo.user.user,
      messageList:[],

      replyList:[],
    }
  },
  methods:{
    onClickLeft(){
      this.$router.go(-1);
    },
    getReflex(mid,reply){
      var _this = this
      _this.axios({
        method:'get',
        url:'/message/ReflexByMid/'+mid,
      }).then(function (rep){
        _this.reflex = rep.data.data.detail;
        _this.$router.push("/reflex-watch?title="+reply.title+"&detail="+reply.detail+"&reflex="+_this.reflex);
      })
    },
    deleteLetter(id){
      var _this = this
      _this.axios({
        method:"get",
        url:"/message/DelLetterById/"+id+"&"+_this.user.username,
      }).then(function (rep){
        _this.messageList = rep.data.data.list
      })
    },
    deleteReflex(id){
      var _this = this
      _this.axios({
        method:"get",
        url:"/message/DelReflexById/"+id+"&"+_this.user.username,
      }).then(function (rep){
        _this.replyList = rep.data.data.list
      })
    },
  },
  mounted() {
    var _this = this
    _this.axios({
      method:'get',
      url:'/message/MessageByUsername/'+_this.user.username,
    }).then(function (rep){
      _this.messageList = rep.data.data.list
    })
    _this.axios({
      method:'get',
      url:'/message/ReplyByUsername/'+_this.user.username,
    }).then(function (rep){
      _this.replyList = rep.data.data.list
      console.log("reply"+_this.replyList)
    })
  }
}
</script>

<style>

.delete-button {
  height: 100%;
}
</style>